<template>
    <div>
        <Card :students="stus" />
        <div class="addBtn">
            <el-button size="large" type="primary" @click="openDrawer">新增</el-button>
        </div>
        <el-drawer> v-model="show" size="500" title="新增成绩" :with-header="true">
            <Add @addStu="add"></Add> 
        </el-drawer>
    </div>
</template>

<script>
import { ref } from 'vue'
import Card from './components/Card.vue'
import Add from './components/Add.vue'

export default {
    name: 'Report',
    components:{
        Card,
        Add
    },
    setup() {
        const stus = ref([
            { name: '张三', age: 20, sex: '男', score: { yw: 80, sx: 89, yy: 90 }},avatar: require
            { name: '李四', age: 20, sex: '男', score: { yw: 88, sx: 46, yy: 74 }},avatar: require
            { name: '王五', age: 20, sex: '男', score: { yw: 68, sx: 77, yy: 87 }},avatar: require
            // Math.random() 静态方法返回一个大于等于 0 且小于 1 的伪随机浮点数，
            // Math.floor() 函数总是返回小于等于一个给定数字的最大整数。
    ]);
    const show = ref(false);
    const openDrawer = function () {
        show.value = true;
    };
    const ad = function (stu) {
        stus.value.push(stu);
        show.value = false;
    }
    return{
        sexList,
    }

        
    }
}
</script>